<template>
<div>
      <Breadcrumb style="margin:10px">
             <BreadcrumbItem :to="{name:'dashboard'}">Home</BreadcrumbItem>
            <BreadcrumbItem>系统列表</BreadcrumbItem>
        </Breadcrumb>

    <div class="content">
        <Card>
               
     <div class="form-search">
        
        <Form
            ref="formSearch"
            :model="formSearch"
            inline
        >
            <FormItem>
                 <Button
                        type="info"
                        icon="md-add"
                        to='addsystem'
                    >Add</Button>
            </FormItem>
          
        </Form>


    </div>

    <div>
    <Table :loading=loading :data="tableData1" :columns="tableColumns1" stripe>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" :to="{name:'editsystem', params:{ id:row.id }}" >编辑</Button>
        </template>
    </Table>
    </div>

    <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total=total :page-size=pagesize :current=page @on-change="changePage" show-elevator show-total size="small"></Page>
        </div>
    </div>

    </Card>

    </div>

    </div>
</template>
<script>
export default {
        data () {
            return {
                tableData1: [],
                loading : false,
                page: 1,
                pagesize: 20,
                total: 0,
                formSearch: {
                    account: ''
                },
                tableColumns1: [
                    {
                        title: 'ID',
                        key: 'id'
                    },
                    {
                        title: '名字',
                        key: 'name'
                    },
                    {
                        title: '描述',
                        key: 'desc'
                    },
                    {
                        title: '添加时间',
                        key: 'createdAt',
                    },
                    {
                        title: '操作',
                        slot : 'action',
                    }
                ]
            }
        },
        created() {
            this.fetchData();
        },
        methods: {
            fetchData () {
                this.loading = true;
                let params = {
                        page: this.page,
                        size: this.pagesize
                    }
                this.$axios
                     .post(this.$API.PERMISSION_SYSTEM_LIST, params)
                     .then(response => {
                        console.log(response);
                        if(response.data && response.data.rc == '0') {
                            this.total = response.data.total;
                            this.tableData1 = response.data.list;
                        } else {
                            this.$Message.error('错误!');
                        }
                        this.loading = false;
                    });
            },
            onEdit(id) {
                console.log(id);
            },
            onSearchSubmit() {
                console.log(this.formSearch);
            },
            changePage (p) {
                // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
                this.page = p;
                this.fetchData();
            }
        }
    }
</script>
